/* eslint-disable no-console */
/*
 * @Author: sunxy
 * @Date: 2021-07-02 23:10:03
 * @LastEditors: 08508
 * @LastEditTime: 2022-04-08 09:17:03
 * @Description: loading 指令
 * @FilePath: \yhd-service-mall-overseas-webd:\nuxtjs\directive\loading.ts
 */

import Vue from 'vue'
import { CombinedVueInstance } from 'vue/types/vue.d'
// loading 加载效果的组件 自定义编写
import Loading from '@/components/Loading.vue'

const loadDirective = {
  // 被绑定元素插入父节点时调用
  inserted(
    el: {
      loadingInstance: CombinedVueInstance<
        Record<never, any> & Vue,
        object,
        object,
        object,
        Record<never, any>
      >
      appendChild: (arg0: Element) => void
    },
    binding: { value: any }
  ) {
    const loadingCo = Vue.extend(Loading)
    // console.log('loadingCo', loadingCo)
    // eslint-disable-next-line new-cap
    const loadingComp = new loadingCo().$mount()
    // console.log('loadingComp', loadingComp)
    // 组件实例 挂到el元素上
    el.loadingInstance = loadingComp
    if (binding.value) {
      el.appendChild(loadingComp.$el)
    }
  },
  // 所在组件的 VNode 更新时调用
  update(
    el: {
      appendChild: (arg0: any) => void
      loadingInstance: { $el: any }
      removeChild: (arg0: any) => void
    },
    binding: { value: any; oldValue: any }
  ) {
    // 当值改变
    if (binding.value !== binding.oldValue) {
      if (binding.value) {
        // v-loading true
        el.appendChild(el.loadingInstance.$el)
      } else {
        // v-loading false 删除节点
        el.removeChild(el.loadingInstance.$el)
      }
    }
  },
}
export default loadDirective
